<template>
  <div id="left-bottom-board">
    <div class="center-board-title">中小学教职工人员结构现状</div>
    <div id="pineEchart"></div>
  </div>
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      myEchart: null
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.zzbz.getTeacherConstr({
          dep_code: this.depCode
        })
        console.log(res)
        const _this = this
        const option = {
          dataset: {
            source: [
              ['bztype', 'nums'],
              ['事业编制', res.SYBZ],
              ['周转编制', res.ZZBZ],
              ['聘教控制数', res.PYJS]
            ]
          },
          color: ['#01C5B2', '#eba954', '#d74e67'],
          grid: {
            left: '40%',
            top: '10',
            bottom: '10',
            right: '80',
            containLabel: true
          },
          xAxis: [
            {
              show: false
            },
            {
              show: false
            }
          ],
          yAxis: {
            type: 'category',
            inverse: true,
            show: false
          },

          series: [
            {
              tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
              },
              type: 'pie',
              center: ['25%', '50%'],
              radius: ['30%', '65%'],
              startAngle: 90,
              avoidLabelOverlap: true,
              label: {
                normal: {
                  color: '#fff',
                  fontSize: 14,
                  formatter: '{b}\n{d}%'
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              encode: {
                itemName: 'bztype',
                value: 'nums'
              }
            },
            //亮色条 百分比
            {
              show: true,
              type: 'bar',
              barGap: '-100%',
              barWidth: '30%',
              z: 2,
              itemStyle: {
                normal: {
                  color: function (params) {
                    var colorList = ['#01C5B2', '#eba954', '#d74e67']
                    return colorList[params.dataIndex]
                  }
                }
              },
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize: 20,
                    fontWeight: 'bold'
                  },
                  position: 'right'
                }
              },
              encode: {
                x: 'nums'
              }
            },
            //类型
            {
              show: true,
              type: 'bar',
              xAxisIndex: 1, //代表使用第二个X轴刻度
              barGap: '-100%',
              barWidth: '20%',
              itemStyle: {
                normal: {
                  barBorderRadius: 200,
                  color: 'transparent'
                }
              },
              label: {
                normal: {
                  show: true,
                  position: [0, '-20'],
                  formatter: '{b}',
                  textStyle: {
                    fontSize: 14,
                    color: '#fff'
                  }
                }
              },
              encode: {
                y: 'bztype'
              }
            }
          ]
        }
        this.myEchart = this.$echarts.init(
          document.getElementById('pineEchart')
        )
        this.myEchart.setOption(option)
        window.addEventListener('resize', () => this.myEchart.resize(), false)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss">
#left-bottom-board {
  width: calc(45% - 15px);
  height: 100%;
  margin-left: 15px;
  box-sizing: border-box;
  background-color: rgba(1, 35, 102, 0.9);
  //background-color: #012366;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .center-board-title {
    font-weight: bold;
    height: 50px;
    border-bottom: #336699 1px solid;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }
}
#pineEchart {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
</style>
